<template>
  <el-row>
    <el-dialog v-model="visible" append-to-body title="选择资源" top="5vh" width="1200px">
      <el-form ref="queryFormRef" :inline="true" :model="queryParams">
        <el-form-item>
          <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-table ref="tableRef" :data="ossList" height="260px" @row-click="clickRow"
                  @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column v-if="false" align="center" label="对象存储主键" prop="ossId" />
          <el-table-column align="center" label="文件名" prop="fileName" />
          <el-table-column align="center" label="原名" prop="originalName" />
          <el-table-column align="center" label="文件后缀" prop="fileSuffix" />
          <el-table-column align="center" label="文件展示" prop="url">
            <template #default="scope">
              <ImagePreview
                v-if="checkFileSuffix(scope.row.fileSuffix)"
                :height="100"
                :preview-src-list="[scope.row.url]"
                :src="scope.row.url"
                :width="100"
              />
              <span v-if="!checkFileSuffix(scope.row.fileSuffix)" v-text="scope.row.url" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime" sortable="custom" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="上传人" prop="createByName" />
          <el-table-column align="center" label="服务商" prop="service" sortable="custom" />

        </el-table>
        <pagination v-if="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                    :total="total" @pagination="getList" />
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSelectOss">确 定</el-button>
          <el-button @click="visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-row>
</template>

<script lang="ts" name="SelectOss" setup>
import { ossSelectAll, unallocatedOssList } from "@/api/iot/elevator";


const props = defineProps({
  elevatorId: {
    type: [Number, String]
  }
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const ossList = ref<any>([]);
const visible = ref(false);
const total = ref(0);
const ossIds = ref<Array<string | number>>([]);

const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 10
});

const tableRef = ref<ElTableInstance>();
const queryFormRef = ref<ElFormInstance>();

const show = () => {
  queryParams.elevatorId = props.elevatorId;
  getList();
  visible.value = true;
};

/**
 * 选择行
 */
const clickRow = (row: any) => {
  // ele的bug
  tableRef.value?.toggleRowSelection(row, false);
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: any[]) => {
  ossIds.value = selection.map((item: any) => item.ossId);
};

/** 查询数据 */
const getList = async () => {
  console.log(queryParams);
  const res = await unallocatedOssList(queryParams);
  ossList.value = res.rows;
  total.value = res.total;
};
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  getList();
};

const emit = defineEmits(["ok"]);
/**选择授权用户操作 */
const handleSelectOss = async () => {
  const elevatorId = queryParams.elevatorId;
  const ids = ossIds.value.join(",");
  if (ids == "") {
    proxy?.$modal.msgError("请选择要分配的用户");
    return;
  }
  await ossSelectAll({ elevatorId, ossIds: ids });
  proxy?.$modal.msgSuccess("分配成功");
  emit("ok");
  visible.value = false;
};

function checkFileSuffix(fileSuffix: string[]) {
  let arr = ["png", "jpg", "jpeg"];
  return arr.some(type => {
    return fileSuffix.indexOf(type) > -1;
  });
}

// 暴露
defineExpose({
  show
});
</script>

<style scoped></style>
